<script setup lang="ts">

import {ArrowRight, Delete, Edit, Search} from "@element-plus/icons-vue";
import {ref, reactive, onMounted} from "vue";
import myAxios from "../service/my-axios.ts";
import {ElMessage, ElMessageBox, FormRules} from "element-plus";


const searchReviewname = ref('')
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(0)
const total = ref(0)
const addReviewFormVisible = ref(false)
const formLabelWidth = '140px'
const updateReviewFormVisible = ref(false)


onMounted(async () => {
  await handleSearch()
})
const handleSearch = async () => {
  tableData.value = []
  currentPage.value = 1
  let res = await myAxios.get("/comments/search1?username=" + searchReviewname.value + "&currentPage=" + currentPage.value);
  if (res?.data.code === 0) {
    res.data.data.records.forEach(review => {
      tableData.value.push(review)
    })
    currentPage.value = res.data.data.current
    pageSize.value = res.data.data.size
    total.value = res.data.data.total
  }
}

const confirmDelete = (id: string) => {
  ElMessageBox.confirm(
      '此操作无法撤销',
      '确认删除?',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        let res = await myAxios.delete("/comments/" + id);
        if (res.data.code === 0) {
          ElMessage({
            type: 'success',
            message: '删除成功',
          })
          await handleSearch()
        } else {
          ElMessage.error(res.data.description)
        }
      })
}
const handleCurrentChange = async (val: number) => {
  tableData.value = []
  let res = await myAxios.get("/comments/search1?username=" + searchReviewname.value + "&currentPage=" + val);
  if (res?.data.code === 0) {
    res.data.data.records.forEach(review => {
      tableData.value.push(review)
    })
    currentPage.value = res.data.data.current
    pageSize.value = res.data.data.size
    total.value = res.data.data.total
  }
}



</script>

<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item >首页</el-breadcrumb-item>
    <el-breadcrumb-item>交流群管理</el-breadcrumb-item>
  </el-breadcrumb>
  <el-card>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input placeholder="请输入用户名" v-model="searchReviewname" clearable @change="handleSearch">
          <template #append>
            <el-button :icon="Search" @click="handleSearch"/>
          </template>
        </el-input>
      </el-col>
    </el-row>
    <el-table :data="tableData" table-layout="fixed" border stripe>
      <el-table-column prop="blog.title"  label="所属博文"/>
      <el-table-column prop="commentUser.username"  label="评论用户"/>
      <el-table-column prop="content" label="内容"/>
      <el-table-column prop="likedNum" label="点赞数"/>
      <el-table-column prop="createTime" label="评论时间"/>
      <el-table-column fixed="right" label="操作" width="120px" slot-scope="scope">
        <template #default="scope">
           <el-button type="danger" :icon="Delete" circle @click="confirmDelete(scope.row.id)"/>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-model:current-page="currentPage"
        :page-size="pageSize"
        :background="true"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
    />
     </el-card>
</template>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}

.image {
  width: 100%;
  display: block;
}
</style>